@import "./option.scss";
@import "./option-group.scss";

.pe-select {
    --pe-select-padding-default: 4px 12px;
    --pe-select-padding-small: 2px 8px;
    --pe-select-padding-large: 8px 16px;
    --pe-select-size: var(--pe-default-height);
    --pe-select-font-size: var(--pe-font-size-default);
    --pe-select-padding: var(--pe-select-padding-default);
    --pe-select-hover-color: var(--pe-color-primary);
    --pe-select-cursor: pointer;
    --pe-select-bg-color: var(--pe-color-white);
}

.pe-select {
    width: 100%;
    min-height: var(--pe-select-size);
    border-radius: var(--pe-border-radius);
    border: 1px solid var(--pe-color-border);
    padding: var(--pe-select-padding);
    transition: var(--pe-all-transition);
    display: inline-flex;
    vertical-align: middle;
    justify-content: space-between;
    align-items: center;
    font-size: var(--pe-select-font-size);
    cursor: var(--pe-select-cursor);
    background-color: var(--pe-select-bg-color);
    overflow: hidden;

    &:hover {
        border-color: var(--pe-select-hover-color);
    }

    .pe-select-prefix {
        display: flex;
        align-items: center;
        margin-right: 5px;
    }

    .pe-select-input {
        width: 0;
        margin: 0;
        border: 0;
        outline: none;
        padding: 0;
    }

    .pe-select-inner {
        display: flex;
        align-items: center;
        width: 85%;
        color: var(--pe-color-placeholder);
        font-size: var(--pe-select-font-size);
        overflow: hidden;

        .pe-select-show {
            width: 100%;
            display: inline-block;
            color: var(--pe-color-text);
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
            white-space: nowrap;
        }

        .pe-select-multiple {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            flex: 1;
            min-width: 0;
            gap: 6px;

            .pe-tag {
                margin-left: 0;
                margin-right: 5px;
            }
        }
    }

    .pe-icon {
        color: var(--pe-color-placeholder);
        transition: all .5s;
    }

    .pe-select-clear {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.pe-select-small {
    --pe-select-size: var(--pe-small-height);
    --pe-select-font-size: var(--pe-font-size-small);
    --pe-select-padding: var(--pe-select-padding-small);
}

.pe-select-large {
    --pe-select-size: var(--pe-large-height);
    --pe-select-font-size: var(--pe-font-size-large);
    --pe-select-padding: var(--pe-select-padding-large);
}

.pe-select-disabled {
    --pe-select-cursor: not-allowed;
    --pe-select-hover-color: var(--pe-color-border);
    --pe-select-bg-color: var(--pe-color-disabled);
}

.pe-select-header {
    width: 100%;
    padding: 0 10px 10px 10px;
    border-bottom: 1px solid var(--pe-color-border);
}

.pe-select-footer {
    width: 100%;
    padding: 10px 10px 0 10px;
    border-top: 1px solid var(--pe-color-border);
}